<style scoped lang="less">
	@import "Pay";
</style>
<template>
	<div class="order-container">
		<div v-if="order_data!=null" class="order-info-wrap">
			<div v-if="status===1">
				<van-count-down class="count-down" format="请在 mm : ss 内完成支付" :time="time"/>
			</div>
			<div class="count-down" v-else-if="status===5">订单未支付，已自动关闭</div>
			<div class="count-down green" v-else>订单已完成支付</div>
			
			
			<div class="goods-name-wrap">
				<div class="goods-name" v-for="(item,index) in order_data.items" :key="index">
					{{item.goods_name}}
				</div>
			</div>
			<div class="order-info-amount">
				总金额：{{order_data.pay_amount/100}}
			</div>
		</div>
		<van-button class="btn-submit" v-if="status===1" @click="getPayInfo" type="primary" :loading="loading"
		            loading-text="支付中...">立即支付
		</van-button>
		<van-button class="btn-tohome" v-else @click="toHome" type="primary">再看看别的</van-button>
	</div>

</template>
<script>
  import {getDateDiff} from "@/libs/util";
  import {getWxPayInfo} from "../../api/pay";
  import {getOrderDetail} from "../../api/order";
  import Vue from 'vue';
  import {CountDown, Dialog, Button} from 'vant';

  Vue.use(CountDown).use(Button);
  export default {
    name: "pay",
    data() {
      return {
        loading: false,
        status: 0,
        time: 0,
        order_id: null,
        order_data: null,
        pay_data: null
      };
    },
    created() {
      this.order_id = this.$route.params.order_id;
      this.getOrderData();
      this.$wx.wxJssdkInit();
    },
    methods: {
      getOrderData() {
        let vm = this;
        getOrderDetail(this.order_id).then(rep => {
          vm.order_data = rep.data.data;
          let diff = getDateDiff(vm.order_data.create_time);
          if ((diff) < (-5 * 60 * 1000)) {
            vm.time = 0;
            vm.btn_disabled = true;
          } else {
            vm.time = parseInt((5 * 60 * 1000) + (diff));
          }
          //订单未支付或支付失败，并且未超时且订单状态为正常状态
          if ((vm.order_data.pay_status === vm.GLOBAL.PAY_STATUS_UN_PAY_ONLINE
            || vm.order_data.pay_status === vm.GLOBAL.PAY_STATUS_PAID_FAILED_ONLINE)
            && vm.order_data.trade_status === vm.GLOBAL.ORDER_STATUS_NORMAL && vm.time > 0) {
            vm.status = 1;
          } else if (vm.order_data.trade_status === vm.GLOBAL.ORDER_STATUS_CLOSE) {
            vm.status = 5;
          }
        })
      },
      getPayInfo() {
        let vm = this;
        vm.loading = true;
        getWxPayInfo(this.order_id).then(rep => {
          console.log(rep.data.data);
          vm.pay_data = rep.data.data;
          vm.toPay();
        }, error => {
          vm.loading = false;
        })
      },
      toHome() {
        this.$router.push({name: 'home'})
      },
      toPay() {
        let vm = this;

        let data = vm.pay_data;
        wx.chooseWXPay({
          appId: data.appId,
          timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          success: function (res) {
            // 支付成功后的回调函数
            if (vm.order_data.goods_type === vm.GLOBAL.ACTIVE_TYPE_VIP) {
              vm.$router.push({name: 'vip-pay-result', params: {order_id: vm.order_id}});
            } else {
              vm.$router.push({name: 'pay-result', params: {order_id: vm.order_id}});
            }
          },
          fail: function (res) {
            vm.loading = false;
            Dialog.alert({
              title: '支付失败',
              message: '您的支付失败了，您可以重新支付，也可以到订单中心中支付。'
            }).then(() => {
              // on close
            });
          }
        });
      }
    }
  }
</script>